<!-- 子组件 -->
<template>
	
	<!-- <picker @change="handleChange" :value="index" :range="options">
		{{options[index] || placeholoder}}
	</picker> -->
	
	<view>
		<!-- 选择框 -->
		<view class='picker_view'>
			<!-- 文本 -->
			<view class='picker_text'>
				<text>{{text}}</text>
			</view>
			
			<!-- 普通选择器 -->
			<picker @change="handleChange" :value="index" :range="options" class='picker'>
				<view class="picker_input">
					<input maxlength="10" :placeholder="placeholder" :disabled="disabled" :value="options[index] || placeholoder" />
				</view>
				<uni-icons class="picker_icons" type="arrowright" size="20"/>
			</picker>
		</view>
	</view>
	
</template>

<script>
export default {
	name: "myPicker",
	props: {
		value: String | Number,
		options: Array,
		placeholoder: {
			type: String,
			default: "请选择"
		}
	},
	data() {
		return {
			index: -1
		};
	},
	watch:{
		// 解决异步加载带来的回显问题
		value(val){
			var rrrrrrr = this.options.findIndex(item => item == val);
			console.log('----------------- r: ', rrrrrrr);
			// this.index = this.options.findIndex(item => item == val);
		}
	},
	methods: {
		handleChange(e) {
			console.log('~~~~~~~~~~~~~~~~~~~~~~~~');
			this.index = e.target.value;
			let currentValue = this.options[this.index];
			console.log('currentValue --- ', currentValue);
			this.$emit("input", currentValue)
			// 用户可以通过监听 @change 事件，在选中的时候进行额外操作
			// this.$emit("change", currentValue)
		},
	}
}
</script>


<style lang="scss" scoped>
	
	// 选择框
	.picker_view {
		width: 100%;
		display: flex;
		// margin: auto;
		border-top: 3upx solid #ccc;
		border-bottom: 3upx solid #ccc;
		padding: 20upx;
	}
	.picker_text {
		width: 35%;
	}
	// .picker_select {
	// 	width: 100%;
	// }
	.picker {
		width: 65%;
		float: right;
		display: flex;
	}
	.picker_input {
		// display: block;
		width: 80%;
		float: left;
		text-align: right;
	}
	.picker_icons {
		float: right;
		width: 20%;
		// margin-left: 10upx;
	}
</style>
